「一键排版」有可能吗？

职场

学术

新媒体

设计

极客

 
科学技术是第一生产力

当然有两篇文章建议提前阅读一下《微信文案「颜值」如何系统性提升（1）？》和《微信文案「颜值」如何系统性提升（2）？》

理论上，我们可以只按一次组合快捷键 Ctrl+Alt+M，就直接完成任何微信/微博的排版。

仅需完成一次精心的配置，从此 1 秒排版。本文底部提供一个基础模版可供复制，欢迎转发使用。

排出来的水平取决于配置的态度。比如 JZ 朋友阿禅的公众号，在圈里是出了名的美观，他也在自己的文章里透露使用到了 markdown 语法实现，不过暂时没用「一键」的形式；但同样是科技圈的爱范儿曾经一度用可能是外包的软件做 markdown 自动排版，丑到辣眼，后来被我们骂过之后可算知道订正了。

想知道怎么实现「一键排版」吗？你只需要准备 Chrome 浏览器，和在浏览器中安装好 Markdown.here 插件。当然，插件来自谷歌的应用商店，如果你不知道如何进入谷歌商店，可以回复我们公众号「翻墙」了解一下。接下去，重点来了： 

1. 明确自己微信/微博图文的大纲、模块关系

看起来是一句废话，但是真的有很多人不知道。

比如顶部引导、正文大纲、配图、配字、说明、超链接区、二维码、阅读原文等……有些运营人连自己的微信/微博图文有几个模块都搞不清楚，那活该排版丑。

2. 确定每个大纲和模块的样式（HTML5 的 CSS3 渲染样式）

刚才提到的这些，组合起来基本就是微信/微博的 VI 样式。举个例子，知名金融公众平台「真格基金」的图文整体 VI 样式是由我们 JZ 定制的▼

微信/微博 VI 是正规企业规范性和专业性的体现。而这种 VI 不仅关乎设计，更关乎代码实现，因为微信/微博图文的样式本质上都是 HTML5 的 CSS3 样式。

JZ 给其他企业定制完成的 VI 很多最终都是专业代码包（看看就行，新上手的运营人不至于做这么正式规格的）▼

3.在 Markdown.here 中录入准备好的全部大纲与模块的样式代码规范。

饭要一口一口吃。你可以参考网友@吴隐隐的学习经历，看一看基本配置的具体方法▼

1）为什么要用 markdown 语法？

因为 markdown 大法好。现代职场中很多人都使用它排版电子文稿包括简历、邮件和普通的 Word 文档。

2）如何设置？

安装好 Markdown.here 插件后，其实你已经可以完成 「一键排版」，只不过使用的是插件的默认样式。

如果想做个性化配置，请进入：Chrome → 设置 → 扩展程序 → markdown.here → 选项 → 基本渲染 CSS。

比如字体问题，我们可以先规范主标题的基本样式。比如把一级标题改为 20 px，二级标题改为 18 px▼

h1, h2, h3, h4, h5, h6{
 margin: 1.3em 0 1em;
 padding:0;
 font-weight: bold;
}

h1 {
 font-size:20px;
 border-bottom:1px solid #ddd;
}

h2 {
 font-size:18px;
 border-bottom: 1px solid #eee;
}


h3 {
 font-size:16px;
}


h4 {
 font-size:16px;
}


h5 {
 font-size:16px;
}


h6 {
 font-size:16px;
 color:#777;
}

考虑到很多账号的正文现在使用 14 号字，你可能会想再加一段渲染规则▼

p {
 font-size:14px;
}；

不过不见得生效，最好的解决方案是在 li 后面加入 font-size ▼

li {
 margin: 0.5em 0;
 font-size:14px;
}；

这样一来，你就配置好了正文的渲染规则。是不是会让你想到锤子便签的 markdown 模式？没错，原理一致。从此你只需要写纯文本内容，并在不同模块前加好 markdown 的规范标记，就可以在写完文本后转换格式了。

4.按下组合键 Ctrl+Alt+M 即可，你在浏览器里一切支持 CSS 渲染的文本内容都支持这种转换，不仅是微信/微博图文编辑界面，还包括你的邮箱草稿。

当然，程序员读者会注意到，就这篇 JZ 的文章当中，还出现了语法的 CSS 高亮，这对于在微信/微博里说明代码简直赛高。

其实实现方法也很简单，只要在代码的开头加“ ``` ”之后加上 「javascript」或者「ruby」或者「其他语言」即可，在代码结束为止再用“ ``` ” 封闭，原本黑色的代码就可以切换成本文中带有高亮的代码视觉样式。

但是默认情况下，「值的类型 type 」中的 type 无法被红色标记出，所以你需要补一段渲染规则▼

p code {
 color: rgb(217, 33, 66);
};

至于其它语法的高亮形式，程序员也可以自定义，或者复制 Sublime TEXT 的一些模版就也不错。

最后，给大家提供一下插件里渲染规则的默认模版。如果插件里写渲染时候不当心写坏了方便你重置▼

/* 
 *NOTE:  
 *- The use of browser-specific styles (-moz-, -webkit-) should be avoided.  
 *   Ifused, they may not render correctly for people reading the email in  
 *   adifferent browser than the one from which the email was sent.  
 *- The use of state-dependent styles (like a:hover) don't work because they  
 *  don't match at the time the styles are made explicit. (In email, styles  
 *   mustbe explicitly applied to all elements -- stylesheets get stripped.)  
 */

/* This is the overall wrapper, itshould be treated as the `body` section. */
.markdown-here-wrapper {  
}


/* To add site specific rules, you canuse the `data-md-url` attribute that we  
  add to the wrapper element. Note that rules like this are used depending  
  on the URL you're *sending* from, not the URL where the recipient viewsit.  
*/

/* .markdown-here-wrapper[data-md-url*="mail.yahoo."]ul { color: red; } */

pre, code {  
  font-size:0.85em;    
  font-family: Consolas, Inconsolata, Courier, monospace; 
} 

code {  
  margin: 0 0.15em;  
  padding: 0 0.3em;  
  white-space: pre-wrap;  
  border: 1px solid #EAEAEA;  
  background-color:#F8F8F8;  
  border-radius:3px;  
  display: inline; /* added to fixYahoo block display of inline code */  
} 

pre {  
  font-size:1em;  
  line-height:1.2em;  
} 

precode {  
  white-space: pre;  
  overflow: auto; /* fixes issue#70: Firefox/Thunderbird: Code blocks with horizontal scroll would have badbackground colour */  
  border-radius:3px;  
  border: 1px solid #CCC;  
  padding: 0.5em 0.7em;  
  display: block; /* added to counteract theYahoo-specific `code` rule; without this, code blocks in Blogger are broken */  }

 /* In edit mode, Wordpress uses a `* {font: ...;} rule+style that makes highlighted 
code look non-monospace. This rule willoverride it. */  

.markdown-here-wrapper[data-md-url*="wordpress."]codespan {  

  font: inherit;  
}


/* Wordpress adds a grey background to`pre` elements that doesn't go well with 
our syntax highlighting. */

.markdown-here-wrapper[data-md-url*="wordpress."]pre {  
  background-color: transparent;  
} 

/* This spacing has been tweaked toclosely match Gmail+Chrome "paragraph" (two line breaks) spacing.  
Note that we only use a top margin andnot a bottom margin -- this prevents the 
"blank line" look at the topof the email (issue #243).  
*/  

p {  
  /* is needed here becauseHotmail/Outlook.com uses to  
    kill the margin in <p>. We need this to win. */  
  margin: 0 0 1.2em 0 ;  
} 

table, pre, dl, blockquote, q, ul, ol {  
  margin: 1.2em 0;  
} 

ul, ol {  
  padding-left:2em;  
} 

li {  
  margin: 0.5em 0;  
} 

/* Space paragraphs in a list the sameas the list itself. */  

lip {  
  /* Needs to override ruleabove. */  
  margin: 0.5em 0 ;  
} 

/* Smaller spacing for sub-lists */  

ulul, ulol, olul, olol { 
  margin:0;  
  padding-left:1em;  
} 

/* Use Roman numerals forsub-ordered-lists. (Like Github.) */  

olol, ulol {  
  list-style-type: lower-roman;  
} 

/* Use letters for sub-sub-orderedlists. (Like Github.) */  

ululol, ulolol, olulol, ololol {  
  list-style-type: lower-alpha;  
} 

dl {  
  padding:0;  
} 

dldt {  
  font-size:1em;  
  font-weight: bold;  
  font-style: italic;  
} 

dldd {  
  margin: 0 0 1em;  
  padding: 0 1em;  
} 

blockquote, q {  
  border-left:4px solid #DDD;  
  padding: 0 1em;  
  color:#777;  
  quotes: none;  }

 blockquote::before, blockquote::after, q::before, q::after {    content: none;  
} 

h1, h2, h3, h4, h5, h6 {  
  margin: 1.3em 0 1em;  
  padding:0;  
  font-weight: bold;  
} 

h1 {  
  font-size:1.6em;  
  border-bottom:1px solid #ddd;  
} 

h2 {  
  font-size:1.4em;  
  border-bottom:1px solid #eee;  
} 

h3 {  
  font-size:1.3em;  
} 

h4 {  
  font-size:1.2em;  
} 

h5 {  
  font-size:1em;  
} 

h6 {  
  font-size:1em;  
  color:#777;  
} 

table {  
  padding:0;  
  border-collapse: collapse;    border-spacing:0;  
  font-size:1em;  
  font: inherit;  
  border:0;  
} 

tbody {  
  margin:0;  
  padding:0;  
  border:0;  
} 

tabletr {  
  border:0;  
  border-top:1px solid #CCC;  
  background-color: white;  
  margin:0;  
  padding:0;  
} 

tabletr:nth-child(2n) {  
  background-color:#F8F8F8;  
}

tabletrth, tabletrtd { 
  font-size:1em;  
  border:1px solid #CCC;  
  margin:0;  
  padding: 0.5em 1em;  
} 

tabletrth { 
 font-weight: bold;  
  background-color:#F0F0F0;  
}

如果了解这个插件的基本工作原理，各位读者不妨设定自己偏好的渲染样式。如果你设计了优质的图文渲染样式，不妨投稿给我们，可以展示给更多用户甚至出售给商业公司。

回复排版微信样式从入门到大神

回复电商入门微信营销变现平台

回复标题学习网络文案标题写作

| JZ 往期商业伙伴 |

APEC 峰会 | 中国航天集团 |  浙江省人民广播电台 | 湖北省电视台
河南卫视 | 交通银行 | 建设银行 | 平安银行 | 民生银行 | 真格基金
南方周末 | 上海闵行教育学院 | 上海创智云课堂 | 新东方集团
伟巴斯特 | 雪佛兰汽车 | 雷诺汽车 | 观致汽车 | TNS新华信
高力国际｜第一太平戴维斯｜德国莱茵｜盖茨基金会｜追星集团

H5／平面／视频／多媒体服务与定制

[phone]